<script setup lang="ts">
import { ref, watch } from "vue"

interface Props {
  data: any | undefined
}
const props = defineProps<Props>()
const emit = defineEmits(["handleView", "handleDelete", "toggleSelect"])

const checkboxValue = ref<boolean>(false)

// 详情 | 创建
function editOrCreate(data: undefined | any) {
  if (data === undefined) {
    emit("handleView", undefined)
  } else {
    emit("handleView", props.data)
  }
}
function handleDelete() {
  emit("handleDelete", props.data)
}
function handleChangeSelect() {
  emit("toggleSelect", props.data)
}

</script>

<template>
  <div class="scenario-card" :title="data === undefined ? '添加三维模型' : data.code">
    <!-- 主图区域 -->
    <div class="image-container">
      <div class="checkbox" v-if="data !== undefined">
        <el-checkbox v-model="checkboxValue" @click.stop @change="handleChangeSelect" />
      </div>
      <div v-if="data !== undefined" class="ic-wrapper" @click="editOrCreate(data)">
        <img
          v-if="!data.path"
          src="@@/assets/images/entity/Unknown-1.png"
          class="scenario-image"
        >
        <img
          v-else
          :src="`/model-api${data.path}`"
          class="scenario-image"
        >
      </div>
      <!-- 操作区域 -->
      <div class="card-info" v-if="data !== undefined">
        <el-tooltip effect="dark" content="删除">
          <el-icon size="16" @click.stop="handleDelete">
            <Delete />
          </el-icon>
        </el-tooltip>
      </div>
    </div>
    <!-- 装备名称 -->
    <div class="equipment-name">
      {{ data === undefined ? "添加三维模型" : data.name }}
    </div>
  </div>
</template>

<style lang="scss" scoped>
.scenario-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.image-container {
  width: 100%;
  aspect-ratio: 1 / 1; /* 保持正方形 */
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  transition: all 0.3s ease;
}

.ic-wrapper {
  padding: 10px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.scenario-image {
  width: 100%;
  height: 100%;
  object-fit: contain; // 改为 contain，保持原始比例
  object-position: center; // 确保图片居中
}

.card-info {
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
  z-index: 2;
}

.checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
}

.equipment-name {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 其他样式保持不变 */
.more-menu {
  position: absolute;
  top: 20px;
  left: -69px;
  width: 100px;
  height: 80px;
  color: #333;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.more-item {
  line-height: 38px;
  flex: 1;
  width: 100%;
  text-align: center;
  cursor: pointer;
}

.more-item:hover {
  background: #f5f7fa;
  color: #409eff;
  border-radius: 4px;
}

.scenario-card:hover {
  /* 悬停效果 */
  .image-container {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: #409eff;
  }
}
</style>
